<template>
    <div>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入商品名称" v-model="queryInfo.query" clearable @clear="getGoodList">
                        <el-button slot="append" icon="el-icon-search" @click="getGoodList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="goAddPage" >添加商品</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button type="warning" @click="deleteGoodsList">批量删除</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-table :data="goodList" ref="goodsTable" border stripe @selection-change="selsChange" @row-click="handleChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column align="center" label="商品名称" prop="name"></el-table-column>
                    <el-table-column align="center" label="定价" prop="price" width="100"></el-table-column>
                    <el-table-column align="center" label="折扣价" prop="nowPrice" width="100"></el-table-column>
                    <el-table-column align="center" label="库存数量" prop="num" width="100"></el-table-column>
                    <el-table-column align="center" label="创建时间" prop="createTime">
                        <template v-slot="scope">
                            {{scope.row.createTime | dateFormat}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="200px">
                        <template v-slot="scope">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="openEdit(scope.row.id)">编辑</el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页区-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pageNum"
                        :page-sizes="[3, 6, 9, 12]"
                        :page-size="queryInfo.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-row>
        </el-card>

        <edit-good ref="dialog"></edit-good>
    </div>
</template>

<script>
    import {goods_delete, goods_request} from "../../network/goods";
    import EditGood from "./EditGood";

    export default {
        name: "Good",
        components: {EditGood},
        data(){
            return{
                queryInfo:{
                    query:'',
                    pageNum: 1,
                    pageSize: 3
                },
                goodList:[],
                sels:[],
                total:0
            }
        },
        created() {
           this.getGoodList()
        },
        methods:{
            getGoodList(){
                goods_request(this.queryInfo.query,this.queryInfo.pageNum,this.queryInfo.pageSize)
                .then(res=>{
                    this.goodList=res.products.records
                    this.total=res.products.total
                })
            },
            handleSizeChange(newSize){
                this.queryInfo.pageSize=newSize
                this.getGoodList()
            },
            handleCurrentChange(newPage){
                this.queryInfo.pageNum=newPage
                this.getGoodList()
            },
            removeById(id){
                this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    goods_delete(id).then(res=>{
                        if (res.msg==='success'){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.getGoodList()
                        }else {
                            this.$message.error("删除失败！")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            selsChange(sels) {
                this.sels = sels
            },
            handleChange(row, event, column) {
                console.log(event);
                console.log(column);
                this.$refs.goodsTable.toggleRowSelection(row)
            },
            goAddPage(){
                this.$store.commit('selectMenu',{path:'/goods/add',
                    name:'Add',label:'添加商品'})
                this.$router.push('/goods/add')
            },
            deleteGoodsList(){
                let number=0;
                this.sels.forEach(res=>{
                    goods_delete(res.id).then(res=>{
                       if (res.code==200){
                           number++;
                       }
                    })
                })
                const that = this;
                setTimeout(function () {
                    that.$message.success("成功删除了"+number+"条商品")
                    that.getGoodList()
                },1000)
            },
            openEdit(id){
                this.$refs.dialog.visible()
                this.$refs.dialog.getData(id)
            }
        }
    }
</script>

<style scoped>

</style>